import React, {Component} from "react";
import {Link} from 'react-router-dom'
import classNames from "classnames";

export default class TabBar extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {};
  }

  render() {

    let HomeClass = classNames({
      'tab-bar-tab': true,
      'tab-bar-active': this.props.HomeActive
    });

    let OrderClass = classNames({
      'tab-bar-tab': true,
      'tab-bar-active': this.props.OrderActive
    });

    let UserClass = classNames({
      'tab-bar-tab': true,
      'tab-bar-active': this.props.UserActive
    });

    return (
      <div className="tab-bar">
        <Link className={HomeClass} to='/'>
          <Item
            title={'首页'}
            icon={
              this.props.HomeActive == true ? '#icon-ico_tabbar_home-css' : '#icon-ico_tabbar_home'
            }
          />
        </Link>

        <Link className={OrderClass} to='/OrderIndex'>
          <Item
            title={'订单'}
            icon={
              this.props.OrderActive == true ? '#icon-ico_tabbar_order-css' : '#icon-ico_tabbar_order'
            }
          />
        </Link>

        <Link className={UserClass} to='/UserIndex'>
          <Item
            title={'我的'}
            icon={
              this.props.UserActive == true ? '#icon-ico_tabbar_user-css' : '#icon-ico_tabbar_user'
            }
          />
        </Link>
      </div>
    )
  }
}

class Item extends Component {

  render() {
    return (
      <div>
        <svg className="tab-bar-icon">
          <use xlinkHref={this.props.icon}></use>
        </svg>
        <p className="tab-bar-title">{this.props.title}</p>
      </div>
    )
  }
}


